import React, { PureComponent } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import Films from '../films/Films'
import Cinemas from '../cinemas/Cinemas'
import Center from '../center/Center'
import Tarbar from '../../components/Tarbar';
import Area from '../area/Area';
import FilmDetail from '../Film/FilmDetail';
import Cinema from '../cinema'
import { StyleTarbarItem } from '../../components/styled'
import MyLink from '../../components/MyLink';
import './index.css'
class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '0',
      hidden: false,
      fullScreen: false,
      routeList: ['/films', '/cinemas', '/infomation', '/center', '/films/nowplayfilms', '/films/comingsoonfilms'],
    };
  }
  setSelectTab = (val) => {
    this.setState({ selectedTab: val })
  }
  
  load = () => {
    switch (this.props.location.pathname.split('/')[1]) {
      case 'films':
        this.setState({
          selectedTab:'0'
        })
        break;
      case 'cinemas':
        this.setState({
          selectedTab:'1'
        })
        break;
      case 'infomation':
        this.setState({
          selectedTab:'2'
        })
        break;
      case 'center':
        this.setState({
          selectedTab:'3'
        })
        break;
      default:
        break;
    }
  }
  render() {
    let { selectedTab, routeList } = this.state;
    let pathname = this.props.location.pathname;
    let rootPath = pathname.split('/')[1]

    return (
      <div style={{ height: "100%" }} onLoad={this.load}>
        {
          routeList.includes(this.props.location.pathname)?
          <Tarbar>
            <StyleTarbarItem>
              <MyLink to="/films" click={()=>{this.setSelectTab('0')}}>
                <div style={{ height: '100%',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column'}}>
                  {
                    selectedTab === '0'&&rootPath==='films' ? (<img src={require('@/assets/img/movie-active.png')} style={{ width: '22px', height: '22px' }} alt=''/>) : (
                      <img src={require('@/assets/img/movie.png')} style={{ width: '22px', height: '22px' }} alt=''/>
                    )
                  }
                  <div style={{marginTop:'0.05rem'}}><span className={selectedTab==='0'&&rootPath==='films'?'tar-active':''}>电影</span></div>
                </div>
              </MyLink>
            </StyleTarbarItem>
            <StyleTarbarItem>
              <MyLink to="/cinemas" click={()=>{this.setSelectTab('1')}}>
                <div style={{ height: '100%',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column'}}>
                  {
                    selectedTab === '1'&& rootPath==='cinemas' ? (<img src={require('@/assets/img/cinemas-active.png')} style={{ width: '22px', height: '22px' }} alt=''/>) : (
                      <img src={require('@/assets/img/cinemas.png')} style={{ width: '22px', height: '22px' }} alt=''/>
                    )
                  }
                  <div style={{marginTop:'0.05rem'}}><span className={selectedTab==='1'&&rootPath==='cinemas'?'tar-active':''}>影院</span></div>
                </div>
              </MyLink>
            </StyleTarbarItem>
            <StyleTarbarItem>
              <MyLink to="/infomation" click={()=>{this.setSelectTab('2')}}>
                <div style={{ height: '100%',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column'}}>
                  {
                    selectedTab === '1'&&rootPath==='infomation' ? (<img src={require('@/assets/img/mzmovie-icon-news-42x42-gray.png')} style={{ width: '22px', height: '22px' }} alt=''/>) : (
                      <img src={require('@/assets/img/mzmovie-icon-news-42x42-gray.png')} style={{ width: '22px', height: '22px' }} alt='' />
                    )
                  }
                  <div style={{marginTop:'0.05rem'}}><span className={selectedTab==='2'&&rootPath==='infomation'?'tar-active':''}>资讯</span></div>
                </div>
              </MyLink>
            </StyleTarbarItem>
            <StyleTarbarItem>
              <MyLink to="/center" click={()=>{this.setSelectTab('3')}}>
                <div style={{ height: '100%',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column'}}>
                  {
                    selectedTab === '3' && rootPath==='center' ? (<img src={require('@/assets/img/center-active.png')} style={{ width: '22px', height: '22px' }} alt=''/>) : (
                      <img src={require('@/assets/img/center.png')} style={{ width: '22px', height: '22px' }} alt=''/>
                    )
                  }
                  <div style={{marginTop:'0.05rem'}}><span className={selectedTab==='3'&&rootPath==='center'?'tar-active':''}>我的</span></div>
                </div>
              </MyLink>
            </StyleTarbarItem>
          </Tarbar>
          :<></>
        }
        <Switch>
          <Route path='/films' component={Films}></Route>
          <Route path='/cinemas' component={Cinemas}></Route>
          <Route path='/center' component={Center}></Route>
          <Route path='/area' component={Area} />
          <Route path='/film/:id' component={FilmDetail} />
          <Route path='/cinema/:id' component={Cinema}/>
          <Redirect exact from='/' to='/films'></Redirect>
        </Switch>
      </div>
    );
  }
}

export default index;